<template>
  <div>
    <div v-if="myList.length">
      <div
        class="active_cp_wrapper"
        :class="{ active_cp_wrapper_border: isValueGrow }"
        v-for="(item, index) in myList"
        :key="index"
      >
        <!-- 股票代码、名称、涨跌幅 -->
        <div class="is_selected_content_wrapper">
          <div class="is_selected_content" @click="linkToKline(item.stockCode, item.market)">
            <div>
              <span v-if="item.stockName">{{ item.stockName }}</span>
              <span v-else>--</span>
              <span>{{ item.stockCode }}</span>
            </div>

            <div>
              <span v-if="item.upDownPercent > 0" class="up_data">
                {{ item.nowPrice }}
              </span>
              <span
                v-else-if="item.nowPrice.length && Number(item.nowPrice) === 0"
                class="zero_data"
              >
                {{ item.nowPrice }}
              </span>
              <span v-else-if="item.nowPrice === '' || item.nowPrice === -9999"> -- </span>
              <span v-else class="down_data">
                {{ item.nowPrice }}
              </span>
            </div>
            <div>
              <span v-if="item.upDownPercent > 0" class="up_data"> {{ item.upDownPercent }}% </span>
              <span
                v-else-if="item.upDownPercent.length && Number(item.upDownPercent) === 0"
                class="zero_data"
              >
                {{ item.upDownPercent }}%
              </span>
              <span v-else-if="item.upDownPercent === '' || item.upDownPercent === -9999">
                --
              </span>
              <span v-else class="down_data"> {{ item.upDownPercent }}% </span>
            </div>
          </div>
          <div
            class="subscribe_btn"
            :style="item.subscribe ? bgcolor : 'background-color: #319EFF'"
            @click="
              stockListSub(
                item.id,
                item.stockCode,
                item.gpc,
                index,
                item.subscribe,
                item.pushtype,
                item.statusValue
              )
            "
            v-if="showStockList"
          >
            <span v-if="!item.subscribe">+跟踪</span>
            <span v-else>取消跟踪</span>
          </div>
        </div>

        <div class="cp_detail_content" @click="linkToKline(item.stockCode, item.market)">
          <div v-if="showStockList">
            <div>买入价格</div>
            <div v-if="item.buyPrice" v-hxm-redgreen>{{ item.buyPrice }}</div>
            <div v-else-if="Number(item.buyPrice) === 0">
              {{ item.buyPrice }}
            </div>
            <div v-else>--</div>
          </div>
          <div v-else>
            <div v-if="!buySeePrice">
              <div v-if="item.rePrice">买入参考价</div>
              <div v-if="item.rePrice">{{ item.rePrice }}</div>
              <div v-else-if="Number(item.rePrice) === 0">
                {{ item.rePrice }}
              </div>
              <div v-else>--</div>
            </div>
            <div v-else>
              <div>买入价格</div>
              <div v-if="item.buyPrice" v-hxm-redgreen>{{ item.buyPrice }}</div>
              <div v-else-if="item.buyPrice && Number(item.buyPrice) === 0">
                {{ item.buyPrice }}
              </div>
              <div v-else>--</div>
            </div>
          </div>
          <div>
            <div>最高涨幅</div>
            <div v-if="item.highestProfit > 0" class="up_data">{{ item.highestProfit }}%</div>
            <div
              v-else-if="item.highestProfit && Number(item.highestProfit) === 0"
              class="zero_data"
            >
              {{ parseFloat(item.highestProfit).toFixed(2) }}%
            </div>
            <div v-else-if="item.highestProfit < 0" class="down_data">
              {{ parseFloat(item.highestProfit).toFixed(2) }}%
            </div>
            <div v-else>--</div>
          </div>
          <div>
            <div>区间涨幅</div>
            <div v-if="item.rangeProfit > 0" class="up_data">{{ item.rangeProfit }}%</div>
            <div v-else-if="item.rangeProfit && Number(item.rangeProfit) === 0" class="zero_data">
              {{ parseFloat(item.rangeProfit).toFixed(2) }}%
            </div>
            <div v-else-if="item.rangeProfit < 0" class="down_data">
              {{ parseFloat(item.rangeProfit).toFixed(2) }}%
            </div>
            <div v-else>--</div>
          </div>
          <div>
            <div v-if="showStockList">
              <div>入选时间</div>
              <div v-if="item.addDate">{{ item.addDate }}</div>
              <div v-else-if="Number(item.addDate) === 0">
                {{ item.addDate }}
              </div>
              <div v-else>--</div>
            </div>
            <div v-else>
              <div v-if="!buySeePrice">
                <div>买入日期</div>
                <div v-if="item.addDate">{{ item.addDate }}</div>
                <div v-else-if="Number(item.addDate) === 0">
                  {{ item.addDate }}
                </div>
                <div v-else>--</div>
              </div>
              <div v-else>
                <div>入选时间</div>
                <div v-if="item.addDate">{{ item.addDate }}</div>
                <div v-else-if="Number(item.addDate) === 0">
                  {{ item.addDate }}
                </div>
                <div v-else>--</div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="!isValueGrow">
          <div v-if="item.subscribeList && item.subscribeList.length">
            <div class="trace_tip_wrapper" @click="closeOpen(index)">
              <div>跟踪提醒</div>
              <div v-show="item.subscribeList.length > 2">
                <div v-if="!item.open">
                  展开
                  <div class="open_image"></div>
                </div>
                <div v-else>
                  收起
                  <div class="close_image"></div>
                </div>
              </div>
            </div>
            <div v-if="item.subscribeList.length > 0" class="trace_tip_content">
              <div v-show="item.open">
                <div v-for="(items, indexs) in item.subscribeList" :key="indexs">
                  <div class="short_trace_msg">
                    <p v-if="items.shortMsg">{{ items.shortMsg }}</p>
                    <p v-if="items.longMsg">{{ items.longMsg }}</p>
                  </div>
                </div>
              </div>
              <div v-show="!item.open">
                <div v-for="(items, indexs) in item.subscribeList" :key="indexs">
                  <div class="short_trace_msg">
                    <div v-show="indexs < 2">
                      <p v-if="items.shortMsg">{{ items.shortMsg }}</p>
                      <p v-if="items.longMsg">{{ items.longMsg }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else-if="item.operaSug">
            <div class="trace_tip_wrapper" @click="closeOpen(index)">
              <div>跟踪提醒</div>
              <div v-if="!item.open">展开<span class="open_image"></span></div>
              <div v-else>
                收起
                <span class="close_image"></span>
              </div>
            </div>
            <div v-if="item.operaSug" class="trace_tip_content">
              <div v-show="item.open">
                <div class="short_trace_msg">
                  <div v-show="item.operaSug.sellTips">
                    <span class="up_data">卖出提示：</span><span>{{ item.operaSug.sellTips }}</span>
                  </div>
                  <div v-show="item.operaSug.buyTips">
                    <span class="up_data">买入提示：</span
                    ><span v-if="item.operaSug">{{ item.operaSug.buyTips }}</span>
                  </div>
                  <div v-show="item.operaSug.jbm">
                    <span class="up_data">基本面：</span><span v-html="item.operaSug.jbm"></span>
                  </div>
                  <div v-show="item.operaSug.jsm">
                    <span class="up_data">技术面：</span><span v-html="item.operaSug.jsm"></span>
                  </div>
                  <div v-show="item.operaSug.xxm">
                    <span class="up_data">消息面：</span><span v-html="item.operaSug.xxm"></span>
                  </div>
                </div>
              </div>
              <div v-show="!item.open">
                <div class="short_trace_msg">
                  <div v-if="item.operaSug.sellTips">
                    <span class="up_data">卖出提示：</span><span>{{ item.operaSug.sellTips }}</span>
                  </div>
                  <div v-if="item.operaSug.buyTips">
                    <span class="up_data">买入提示：</span
                    ><span v-if="item.operaSug">{{ item.operaSug.buyTips }}</span>
                  </div>
                  <div v-else>
                    <span class="up_data" v-show="item.operaSug.jbm">基本面：</span
                    ><span v-html="item.operaSug.jbm"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <NoData />
    </div>
  </div>
</template>
<script>
import { jumpTokline, stopBodyScroll } from '../utils/index';
import NoData from './common/NoData.vue';
import { GET_SUB, SET_SUB } from '@/apis';
export default {
  props: {
    myList: {
      type: String,
      default: [],
    },
  },
  components: {
    NoData,
  },
  watch: {
    infoDataStatus: {
      handler(newValue, oldValue) {
        if (newValue) {
          oldValue = newValue;
        }
      },
    },
  },
  data() {
    return {
      stocksNum: 0,
      bgcolor:
        window.getCssStyle() === 'black' ? 'background-color:#222222' : 'background-color:#cccccc',
      showStockList: getParam('product') === 'jtzz',
      // 高管增持和细分龙头
      buySeePrice: ['2','78','118'].includes(window.getParam('gpc_id')),
      //价值成长
      isValueGrow: [734].includes(Number(this.$route.query.gpc_id)),
    };
  },
  methods: {
    dialogCommon(title, content) {
      stopBodyScroll();
      this.$dialog({
        title,
        content,
        btns: [
          {
            text: '我知道了',
            callback: () => {
              stopBodyScroll();
            },
          },
        ],
      });
    },
    closeOpen(index) {
      this.$set(this.myList[index], 'open', !this.myList[index].open);
    },
    linkToKline(stockCode, marketId) {
      jumpTokline(stockCode, marketId);
    },
    //个股订阅和取消
    async stockListSub(stockId, stockCode, gpcId, index, status, pushType, stockListSub) {
      // 买入：2、持仓：3、待买入：8 的才可以订阅
      if (!(stockListSub === 2 || stockListSub === 3 || stockListSub === 8)) {
        this.$toast('该个股当前状态不可跟踪');
        return;
      }
      // 1.判断有无订阅方式
      if (!status) {
        if (pushType) {
          //订阅
          //2.判断对应的股池是否订阅
          //3.判断跟踪的个股数量是否大于5
          const params = {
            version: getParam('product') === 'jtzz' ? 2 : 1, //订阅限制，1-没有限制，2-按照股票池的规则，所有股票池只能订阅两个
            stockid: stockId,
            gpc: gpcId,
            stockcode: stockCode,
            pushtype: pushType,
          };
          const res = await SET_SUB(params);
          if (Number(res.code) === 0 && res.data) {
            this.$set(this.myList[index], 'subscribe', true);
            this.$toast(res.data);
            return;
          }
          if (Number(res.code) === -1 && res.data) {
            this.$toast(res.data); //订阅失败
            return;
          }
          if (Number(res.code) === -2 && res.data) {
            this.$toast(res.data); //参数错误
            return;
          }
          if (Number(res.code) === -3 && res.data) {
            const title = res.data ? res.data : '订阅股票池数量已达到上限';
            const content = '跟踪个股需要订阅所在股池，您已订阅3个股池，请先取消订阅其他股池';
            this.dialogCommon(title, content);
            return;
          }
          if (Number(res.code) === -4 && res.data) {
            const title = res.data ? res.data : '订阅个股数量已达到上限';
            const content = '跟踪个股需要订阅所在股池，您已跟踪5个个股，请先取消跟踪其他个股';
            this.dialogCommon(title, content);
            return;
          }
          this.$toast(res.data);
          return;
        }
        // 通过store将要订阅的股池id传到订阅方式组件中
        this.$toast('请先选择一种订阅方式或订阅对应的股池');
        return;
      }
      //取消订阅
      const params = {
        version: getParam('product') === 'jtzz' ? 2 : 1, //订阅限制，1-没有限制，2-按照股票池的规则，所有股票池只能订阅两个
        stockid: stockId,
        gpc: gpcId,
        stockcode: stockCode,
      };
      const res = await SET_SUB(params);
      if (Number(res.code) === 0 && res.data) {
        this.$set(this.myList[index], 'subscribe', false);
        this.$toast('已为您取消跟踪');
        return;
      }
      this.$toast('取消订阅失败');
    },
  },
};
</script>
<style lang="less" scoped>
.active_cp_wrapper {
  padding: 0.2rem 0.1rem;
}
.active_cp_wrapper_border {
  border-bottom: 0.01rem solid #eeeeee;
  box-shadow: inset 0 0 0 0 #ebebeb;
}
[theme-mode='black'] .active_cp_wrapper_border {
  border-bottom: 0.01rem solid #222222;
  box-shadow: inset 0 0 0 0 #222222;
}
.cp_detail_content {
  display: flex;
  font-size: 0.28rem;
  align-items: center;
  justify-content: space-between;
  color: #666666;
  text-align: center;
  padding: 2%;
  margin-top: 2%;
}
[theme-mode='black'] .cp_detail_content {
  font-size: 0.28rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #d2d2d3;
  text-align: center;
  padding: 2%;
  margin-top: 2%;
}
.trace_tip_wrapper {
  font-size: 0.28rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #666666;
  padding: 2%;
  margin-top: 0.1rem;
  text-align: center;
  div:nth-child(2) {
    width: 16%;
  }
  img {
    width: 0.38rem;
    height: 0.3rem;
    margin-bottom: 0.1rem;
    margin-right: 3%;
  }
}
.short_trace_msg {
  font-size: 0.28rem;
  color: #2a2a2a;
  padding: 0 2%;
  margin-top: 0.1rem;
  overflow: hidden;
}
[theme-mode='black'] .short_trace_msg {
  font-size: 0.28rem;
  color: #d2d2d3;
  letter-spacing: 0;
  text-align: justify;
  padding: 0 2%;
  margin-top: 0.1rem;
}
.trace_tip_content {
  border-bottom: 0.01rem solid #eeeeee;
  box-shadow: inset 0 0 0 0 #ebebeb;
  padding-bottom: 0.44rem;
}
[theme-mode='black'] .trace_tip_content {
  border-bottom: 0.01rem solid #222222;
  box-shadow: inset 0 0 0 0 #222222;
  padding-bottom: 0.44rem;
}
</style>
